import gsap from 'gsap'

// 滚动揭示动画指令
const scrollReveal = {
  mounted(el, binding) {
    const options = binding.value || {}
    const delay = options.delay || 0
    
    gsap.from(el, {
      y: 30,
      opacity: 0,
      duration: 0.8,
      delay: delay / 1000,
      ease: 'power2.out'
    })
  }
}

// 鼠标悬停动画指令
const hoverEffect = {
  mounted(el, binding) {
    const options = binding.value || {}
    const scale = options.scale || 1.05
    const duration = options.duration || 0.3
    
    el.addEventListener('mouseenter', () => {
      gsap.to(el, {
        scale: scale,
        duration: duration,
        ease: 'power2.out'
      })
    })
    
    el.addEventListener('mouseleave', () => {
      gsap.to(el, {
        scale: 1,
        duration: duration,
        ease: 'power2.out'
      })
    })
  },
  unmounted(el) {
    el.removeEventListener('mouseenter', null)
    el.removeEventListener('mouseleave', null)
  }
}

// 文本打字机效果指令
const typewriter = {
  mounted(el, binding) {
    const text = binding.value || el.textContent
    const speed = binding.arg || 50
    
    el.textContent = ''
    
    let i = 0
    const timer = setInterval(() => {
      if (i < text.length) {
        el.textContent += text.charAt(i)
        i++
      } else {
        clearInterval(timer)
      }
    }, speed)
  }
}

export default {
  install(app) {
    app.directive('scroll-reveal', scrollReveal)
    app.directive('hover-effect', hoverEffect)
    app.directive('typewriter', typewriter)
  }
} 